<template>
  <div>
    <a-card title="变更情况汇总" :bordered="false" :headStyle="{ padding: '0 15px', border:0, marginTop: '15px' }" style="width:100%">
      <ve-radar :data="statisticsData" :extend="radarExtend" height="160px"></ve-radar>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
export default {
  name: 'ChangeCollect',
  components: {
  },
  data () {
    return {
      radarExtend: {
        title: {
          // text: '系统资源',
          x: 'center',
          y: '5px',
          textStyle: {
            fontSize: 14,
            color: '#333'// 主标题文字颜色
          }
        },
        radar: {
          splitArea: {
            show: false
          },
          splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              color: '#d9d9d9',
              // 分隔线颜色
              width: 1
              // 分隔线线宽
            }
          },
          axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
              color: '#999',
              // 坐标轴线线的颜色。
              width: 1,
              // 坐标轴线线宽。
              type: 'solid'
              // 坐标轴线线的类型。
            }
          },
          shape: 'circle',
          center: ['50%', '60%'],
          radius: 60
        },
        series: {
          tooltip: {
            trigger: 'item'
          },
          areaStyle: { // 单项区域填充样式
            normal: {
              color: 'rgba(255,0,0,0.6)' // 填充的颜色。[ default: "#000" ]
            }
          }
        }
      },
      statisticsData: {
        columns: ['渠道', '变更成功', '变更回滚', '变更失败'],
        rows: [
          { '渠道': '变更情况', '变更成功': 1393, '变更回滚': 1093, '变更失败': 32 }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    // this.getalArmHandleRate()
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 相应处置率
     */
    getalArmHandleRate () {
      // 告警处置率
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
